/* eslint-disable jsx-a11y/alt-text */
import React, { useEffect, useState } from 'react';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import './index.less';
import home1 from '@/assets/images/tabbar/home_1.png'; //蓝色
import home2 from '@/assets/images/tabbar/home_2.png'; //灰色
import my1 from '@/assets/images/tabbar/my_1.png'; //蓝色
import my2 from '@/assets/images/tabbar/my_2.png'; //灰色
import fast from '@/assets/images/tabbar/fast.png'; //快速刷题
import { useLocation, useNavigate } from 'react-router-dom';
// 把路由的路径写成一个数组的形式，这样子可以获取到对应的下标值
const routes = ['/home', '/fast', '/mine'];
export default function TabBar() {
  // tabbar栏的默认索引值
  const location = useLocation();
  const [value, setValue] = useState(routes.indexOf(location.pathname));
  const navigate = useNavigate();
  useEffect(() => {
    // 监听页面，根据路由的路径，改变value值，显示对应value值的页面
    setValue(routes.indexOf(location.pathname));
  }, [location.pathname]);
  return (
    <div
      className="tabbar"
      style={{ display: value === -1 ? 'none' : 'block' }}
    >
      {/* 点击切换的时候，进行路由跳转，跳转的路径对应点击tabbar的下标值 */}
      <BottomNavigation
        showLabels
        value={value}
        onChange={(event, newValue) => {
          navigate(routes[newValue]);
        }}
      >
        <BottomNavigationAction
          label="首页"
          icon={<img src={value === 0 ? home1 : home2} />}
        />
        <BottomNavigationAction label="快速刷题" icon={<img src={fast} />} />
        <BottomNavigationAction
          label="我的"
          icon={<img src={value === 2 ? my1 : my2} />}
        />
      </BottomNavigation>
    </div>
  );
}
